@use '../../../util/events' as events;

$overflow-indicator-inline-position: -10px;
$overflow-indicator-width: 10px;
$event-overflow-margin: 10px; // CORRELATION ID: 1

.sx__date-grid {
  display: flex;
  padding-left: var(--sx-calendar-week-grid-padding-left);
}

.sx__date-grid-day {
  position: relative;
  width: 100%;
  display: grid;
  grid-gap: 2px;

  /* needed for the draw plugin */
  .sx__spacer {
    display: var(--sx-draw-plugin-spacer-display, none);
    height: var(--sx-draw-plugin-spacer);
  }
}

.sx__date-grid-event {
  z-index: 1;
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--sx-spacing-padding1);
  border-radius: var(--sx-rounding-extra-small);
  font-size: clamp(12px, var(--sx-font-extra-small), 14px);
  font-weight: 600;
  user-select: none;

  &:has(.sx__date-grid-event--left-overflow) {
    margin-left: $event-overflow-margin;
  }

  &:has(.sx__date-grid-event--right-overflow) {
    margin-right: $event-overflow-margin;
  }

  @include events.is-event-new;

  @mixin event-overflow-indicator {
    position: absolute;
    z-index: 1;
    width: $overflow-indicator-width;
    height: 100%;
  }

  .sx__date-grid-event--left-overflow {
    @include event-overflow-indicator;

    left: $overflow-indicator-inline-position;
    clip-path: polygon(100% 0, 0 50%, 100% 100%, 100% 0);
  }

  .sx__date-grid-event--right-overflow {
    @include event-overflow-indicator;

    right: $overflow-indicator-inline-position;
    clip-path: polygon(0 0, 100% 50%, 0 100%, 0 0);
  }

  &.sx__date-grid-event--copy {
    z-index: 2;
    box-shadow: var(--sx-box-shadow-level3);
    transition-property: transform, width;
    transition-duration: 0.15s;
    transition-timing-function: ease-in-out;
  }
}

.sx__date-grid-event-text {
  width: calc(100% - var(--sx-spacing-padding1) * 2);
  left: var(--sx-spacing-padding1);
  position: absolute;
  text-overflow: ellipsis;
  overflow-x: hidden;
  white-space: nowrap;

  .sx__date-grid-event-time {
    font-weight: initial;
  }
}

.sx__date-grid-cell {
  height: clamp(20px, 1.25rem, 24px);
}

.sx__date-grid-event-resize-handle {
  position: absolute;
  right: 0;
  height: 100%;
  width: clamp(10px, 15px, 50%);
  cursor: ew-resize;
  z-index: 1;
  touch-action: none;

  [dir="rtl"] & {
    left: 0;
    right: auto;
  }
}

.sx__date-grid-background-event {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}
